<template>
  <el-form ref="form" :model="form" label-width="80px" style="margin-left: 10%;">
    <el-form-item style="width: 50%; padding:0;display: inline-block; position: relative; margin-bottom: 3%;" label="日志名称" >
      <el-input v-model="form.logName" style="width: 80%; position: relative;" v-on:blur="test" placeholder="请填写日志名称"></el-input>
    </el-form-item>
    <el-form-item style="display: inline-block; position: relative; margin-bottom: 3%;" label="迭代名称">
      <el-select v-model="form.sprintId" :value="form.sprint" placeholder="请选择迭代名称">
        <div :key="item.a" v-for="item in this.form.sprintSelect">
          <el-option :label="item.sprintName" :value="item.sprintId" ></el-option>
        </div>
      </el-select>
    </el-form-item>
    <el-form-item style="width: 50%; padding:0; display: inline-block; position: relative; margin-bottom: 3%;" label="发布人" >
      <el-input v-model="form.promulgatorName"  style="width: 80%;" placeholder="请输入发布人姓名"></el-input>
    </el-form-item>
    <el-form-item style="display: inline-block; position: relative; margin-bottom: 3%;" label="团队名称">
      <el-select v-model="form.groupId" placeholder="请选择迭代团队">
        <div :key="item.b" v-for="item in this.form.teamSelect">
          <el-option :label="item.groupName" :value="item.groupId"></el-option>
        </div>
      </el-select>
    </el-form-item>
    <template>
    <!--<el-alert style="width: 30%; margin: 0% 0% 1% 8%;" title="分段标题请用 # 开头 ! 结束" type="info"></el-alert>-->
    </template>
    <el-form-item label="内容" style="position: relative; margin-bottom: 3%;">
      <quill-editor v-model="form.content"
        ref="myQuillEditor"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)">
      </quill-editor>
    </el-form-item>
    <el-form-item style="float: right; margin-right: 20%;">
      <el-button style="padding: 0 19px;">
        <template>
          <el-button type="text" @click="publish">发布</el-button>
        </template>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'sprintText',
  props: ['sendData', 'sendGround', 'resCode', 'fixLog'],
  data () {
    return {
      form: {
        promulgatorName: '',
        reminderMsg: [{reminder: true, msg: '内容不能为空'}],
        teamSelect: [],
        team: {},
        groupId: '',
        sprintSelect: [],
        sprint: '',
        sprintId: '',
        content: `<h2>迭代目标：</h2><p><br></p ><p><br></p ><p><br></p ><h2><strong>完成情况：</strong></h2><h3><br></h3><p><br></p ><h2><strong>优缺点：</strong></h2><h3><br></h3><p><br></p ><p><br></p ><h2><strong>收获：</strong></h2><h3><br></h3><p><br>`,
        logName: '',
        string: '',
        status: '添加日志',
        logPublishtime: ''
      }
    }
  },
  created () {
    // console.log(this.$route.query.logId)
    if (this.$route.query.logId) {
      this.beforeFix()
    }
  },
  mounted () {
    document.getElementsByClassName('ql-editor')[0].style.minHeight = '200px'
    var that = this
    setTimeout(function () {
      for (var j = 0; j < that.$props.sendGround.length; j++) {
        that.form.teamSelect.push(that.$props.sendGround[j])
      }
      console.log(that.form.teamSelect)
      for (var i = 0; i < that.$props.sendData.length; i++) {
        that.form.sprintSelect.push(that.$props.sendData[i])
      }
      console.log(that.form.sprintSelect)
    }, 1000)
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    onEditorBlur (quill) {
      // console.log('editor blur!', quill)
      // console.log(this.emailData.html)
    },
    onEditorFocus (quill) {
      // console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      // console.log('editor ready!', quill)
    },
    test () {
      console.log('我是sprintId' + this.form.sprintId)
      console.log('我是groupId' + this.form.groupId)
      console.log('我是logId' + this.$route.query.logId)
    },
    beforeFix () {
      var that = this
      setTimeout(function () {
        console.log('监听')
        console.log(that.$props.fixLog)
        that.form.logName = that.$props.fixLog.logName
        that.form.promulgatorName = that.$props.fixLog.logOperator
        that.form.team = that.$props.fixLog.groupName
        that.form.groupId = that.$props.fixLog.groupId
        that.form.sprint = that.$props.fixLog.sprintName
        that.form.sprintId = that.$props.fixLog.sprintId
        that.form.content = that.$props.fixLog.logContent
        that.form.status = '修改日志'
        var year = new Date().getFullYear()
        var month = new Date().getMonth() + 1
        var day = new Date().getDate()
        var logPublishtime = year + '-' + month + '-' + day
        that.form.logPublishtime = logPublishtime
        console.log(that.form)
        that.$emit('toParentAddLog', that.form)
      }, 1000)
    },
    reminder (status, msg) {
      this.$confirm('确定发布？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: status,
          message: msg
        })
      })
    },
    publish () {
      // var that = this
      if (!this.form.logName) {
        this.reminder('fail', '日志名称不能为空，请重新输入')
      } else {
        if (this.form.logName.length > 50) {
          this.reminder('fail', '日志名称长度应小于20个字符，请重新输入')
        } else if (!this.form.promulgatorName) {
          this.reminder('fail', '发布人不能为空，请重新输入')
        } else {
          if (this.form.promulgatorName.length > 20) {
            this.reminder('fail', '发布人名称长度不得多于20个字符，请重新输入')
          } else if (!this.form.content) {
            console.log()
            this.reminder('fail', '日志内容不能为空，请重新输入')
          } else if (!this.form.sprintId) {
            console.log(this.form.sprintName)
            this.reminder('fail', '迭代名称不能为空，请重新输入')
          } else {
            if (this.form.sprint.length > 50) {
              this.reminder('fail', '迭代名称长度应小于50个字符，请重新输入')
            } else if (!this.form.team) {
              this.reminder('fail', '团队名称不能为空，请重新输入')
            } else {
              if (this.form.team.length > 20) {
                this.reminder('fail', '团队名称长度应小于20个字符，请重新输入')
              } else {
                console.log(this.form)
                console.log('准备发布日志')
                this.$emit('toParentAddLog', this.form)
                var next = this
                setTimeout(function () {
                  console.log(next.$props.resCode)
                  if (next.$props.resCode) {
                    next.reminder('success', '发布成功!')
                    var that = next
                    setTimeout(function () {
                      that.$router.push({path: '/log'})
                    }, 2000)
                  }
                }, 1000)
              }
            }
          }
        }
      }
    }
  }
}

</script>
<style scoped lang="sass">
  .line
    width: 20px
    margin-left: 10px
  .quill-editor
    width: 78%
  .quill-editor .ql-container .ql-blank
    min-height: 200px
  .msgReminder
    position: absolute
    top: -83%
    left: 0%
    color: red
    font-size: 20px
    z-index: 999
  .reminderContent
    top: -7%
</style>
